@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@include classNameConnect(alter) {
  position: relative;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 10px;
  line-height: normal;
  overflow: hidden;
  padding: $--alter-padding-vertical $--alter-padding-horizontal;
  border-radius: $--border-radius-default;
  font-size: $--font-size-default;
  transform-origin: top;
  @include el(close) {
    position: absolute;
    right: $--alter-padding-horizontal;
    top: 50%;
    transform: translateY(-50%);
    color: mix($--color-white, $--color-text-default, 30%);
    cursor: pointer;
    &:hover,
    &:focus,
    &:active {
      color: $--color-text-default;
    }
  }

  @include b(with-des) {
    line-height: $--line-height-default;
    padding: $--alter-padding-horizontal;
    @include el(close) {
      top: $--alter-padding-vertical;
      transform: translateY(0);
    }
    @include el(message, false) {
      font-size: $--font-size-title;
      color: $--color-text-title;
    }
  }

  @include b(with-icon) {
    padding-left: $--alter-padding-with-icon-horizontal;
    @include el(icon, false) {
      position: absolute;
      top: 50%;
      left: #{$--alter-padding-with-icon-horizontal / 2};
      transform: translate(-50%, -50%);
      font-size: 16px;
    }

    @include b(with-des, false, true) {
      padding-left: $--alter-padding-with-icon-description-horizontal;
      @include el(icon, false) {
        left: #{$--alter-padding-with-icon-description-horizontal / 2};
        font-size: 26px;
      }
    }
  }

  @include b(info) {
    background-color: mix($--color-info, $--color-white, 10%);
    border-color: mix($--color-white, $--color-info, 30%);
    @include el(icon, false) {
      color: $--color-info;
    }
    @include b(dark, false, true) {
      background-color: $--color-info;
      border-color: $--color-info;
    }
  }
  @include b(success) {
    background-color: mix($--color-success, $--color-white, 10%);
    border-color: mix($--color-white, $--color-success, 30%);
    @include el(icon, false) {
      color: $--color-success;
    }
    @include b(dark, false, true) {
      background-color: $--color-success;
      border-color: $--color-success;
    }
  }
  @include b(error) {
    background-color: mix($--color-danger, $--color-white, 10%);
    border-color: mix($--color-white, $--color-danger, 30%);
    @include el(icon, false) {
      color: $--color-danger;
    }
    @include b(dark, false, true) {
      background-color: $--color-danger;
      border-color: $--color-danger;
    }
  }
  @include b(warning) {
    background-color: mix($--color-warning, $--color-white, 10%);
    border-color: mix($--color-white, $--color-warning, 30%);
    @include el(icon, false) {
      color: $--color-warning;
    }
    @include b(dark, false, true) {
      background-color: $--color-warning;
      border-color: $--color-warning;
    }
  }

  @include b(dark) {
    color: $--color-white;

    @include el((icon, message, description, close), false) {
      color: $--color-white;
    }
  }
}
